<template>
  <div class="main">
    <div class="box">
      <el-steps direction="vertical" :space="200" :active="active" finish-status="success">
        <el-step title="验证注册邮箱"></el-step>
        <el-step title="重新填写密码"></el-step>
        <el-step title="成功修改密码"></el-step>
      </el-steps>
    </div>
    <div class="card">
      <el-result class="whiteItem" icon="success" title="修改密码成功"  subTitle="请返回登陆">
        <template #extra>
          <el-button type="primary" size="medium" disabled>{{time}}s后自动跳转</el-button>
        </template>
      </el-result>
    </div>
    <div class="button">
      <el-button style="margin-top: 12px;" @click="next">{{content}}</el-button>
    </div>

  </div>

</template>

<script>
export default {
  name: "ReturnLogin",
  data() {
    return {
      active: 2,
      content: '返回登陆',
      time: 5
    }
  },
  mounted() {
    this.countDown()
  },
  methods: {
    next(){
      if(this.active++ > 2){
        this.active = 0;
        this.content = '下一步'
      }
      if(this.content === '返回登陆'){
        this.time = -1;
        this.$router.push('/login')
      }
      if(this.active === 2){
        this.content = '返回登陆'
      }
    },
    countDown(){
      let clock = window.setInterval(() => {
        this.time--;
        if(this.time < 0) {
          window.clearInterval(clock)
          this.$router.push('/login')
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
.box {
  height: 500px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 450px;
  margin: auto;
}

.button {
  height: 500px;
  position: absolute;
  top: 600px;
  right: 600px;
  margin: auto;
}

.card {
  position: absolute;
  top: 300px;
  bottom: 0;
  left: 750px;
  margin: auto;
}

.main {
  position: fixed;
  width: 100%;
  height: 100%;

  background-image: url('../img/bgi2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.el-result__inner{
  color: white;
}
</style>